<template>
	<view class="container">
		<!-- 标题栏 -->
		<view class="title">显示图片</view>
		
		<!-- 图片展示区域 -->
		<view class="image-container">
			<image 
				:src="iconFilePath" 
				@click="updateImage()" 
				mode="aspectFill"
				class="display-image"
			></image>
		</view>
		
		<!-- 功能按钮区域 -->
		<view class="button-group">
			<button class="btn" @click="updateImage()">选择图片显示</button>
			<button class="btn" @click="previewCurrentImage()">预览图片</button>
			<button class="btn" @click="getImageInfo()">获取图片信息</button>
		</view>
		
		<!-- 图片信息展示 -->
		<view v-if="imageInfo" class="info-panel">
			<view class="info-item">宽度：{{imageInfo.width}}px</view>
			<view class="info-item">高度：{{imageInfo.height}}px</view>
			<view class="info-item">类型：{{imageInfo.type}}</view>
			<view class="info-item">大小：{{(imageInfo.size/1024).toFixed(2)}}KB</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath: "/static/neiko.jpeg",
				imageInfo: null
			}
		},
		methods: {
			updateImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					success: (res) => {
						console.log("选择的图片路径：", res.tempFilePaths[0]);
						this.iconFilePath = res.tempFilePaths[0];
						this.imageInfo = null;
					},
					fail: (err) => {
						console.error("选择图片失败：", err);
						uni.showToast({ title: "选择图片失败", icon: "none" });
					}
				});
			},
			previewCurrentImage() {
				uni.previewImage({
					urls: [this.iconFilePath],
					current: 0,
					success: () => console.log("预览图片成功"),
					fail: (err) => {
						console.error("预览图片失败：", err);
						uni.showToast({ title: "预览图片失败", icon: "none" });
					}
				});
			},
			getImageInfo() {
				uni.getImageInfo({
					src: this.iconFilePath,
					success: (res) => {
						console.log("图片信息：", res);
						this.imageInfo = res;
					},
					fail: (err) => {
						console.error("获取图片信息失败：", err);
						uni.showToast({ title: "获取信息失败", icon: "none" });
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		text-align: center;
		padding: 20rpx;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx 0;
	}
	
	.image-container {
		margin-top: 100rpx;
		width: 350rpx;
		height: 350rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
		border: 2rpx solid #eee;
	}
	
	.display-image {
		width: 100%;
		height: 100%;
	}
	
	.button-group {
		margin-top: 80rpx;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.btn {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}
	
	.info-panel {
		margin-top: 50rpx;
		text-align: left;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
	}
	
	.info-item {
		margin: 10rpx 0;
		font-size: 26rpx;
		color: #333;
	}
</style>